<template>
    <div class="main">
        <div class="left">
            <div class="left-t">
                <span>首页 /</span>
                <span>Dashboar /</span>
                <span>工作台</span>
            </div>
            <div class="left-b">
                <div class="left-img"></div>
                <div class="bottom-text">
                    <p>早安,曲丽丽,祝你开心每一天</p>
                    <span>交互专家|蚂蚁金服-平台数据技术事业群-基础平台部-用户体验技术部-UED</span>
                </div>
            </div>
        </div>
        <div class="right">
            <div>
                <div class="text1">项目数</div>
                <div class="text2">56</div>
            </div>
            <div>
                <div class="text1">团队内排名</div>
                <div class="text2">8<span>/24</span></div>
            </div>
            <div>
                <div class="text1">项目访问</div>
                <div class="text2">2,223</div>
            </div>
        </div>
    </div>
</template>

<script>
    //import RingChart from './RingChart'
    export default {
        name: "headArea",
        components: {},

        data() {
            return {}
        },
        created() {
        },

        methods: {},

        mounted() {

        }

    }
</script>

<style scoped>
    .main {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #ffffff;
        height: 150px;
        padding: 0 35px;
    }
    .main .left .left-t {
        text-align: left;
        color: #aaa8a8;
        font-size: 14px;
    }
    .main .left .left-b {
        display: flex;
    }
    .main .left .left-b .bottom-text {
        text-align: left;
    }
    .main .left .left-b .bottom-text p{
        margin-top: 28px;
    }
    .main .left .left-b .bottom-text span {
        color: #aaa8a8;
        font-size: 14px;
    }
    .main .left .left-b .left-img {
        margin: 15px 15px 0 0;
        height: 80px;
        width: 80px;
        background: url("../image/img1.png") no-repeat center;
        background-size: cover;
    }
    .main .right {
        display: flex;
    }
    .main .right .text1{
        color: #aaa8a8;
        font-size: 14px;
        padding:0 30px 10px 30px;
    }
    .main .right .text2{
        font-size: 32px;
    }
    .main .right .text2 span {
        color: #aaa8a8;
        font-size: 24px;
    }
</style>
